<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>地图展示</title>
	<link rel="icon" href="../images/favicon.png" type="image/x-icon">
    
    <script language="javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=6ee01182e8363350bc686acb8a4ad9ad&plugin=AMap.GraspRoad"></script>
	<link rel="stylesheet" href="../element/theme-default/index.css">
	<link rel="stylesheet" href="../css/playback.css"/>
    <!-- <script type="text/javascript" src="../js/map-gps-mongodb-operate.js?v=125" ></script> -->
    <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="../js/RangeSlider.js" ></script>
    <script src="../js/vue.js"></script>
	<script src="../js/prototype.js"></script>
    <script src="../element/index.js"></script>
    
</head>
<body>
	<div class="wrap" v-cloak>
		<div id="container" tabindex="0"></div>
		<div class="form_box">
			<el-form ref="form" :model="form" label-width="80px">
				<el-form-item label="行程1:" style="width:330px">
					<el-input v-model="form.route1" size="small"></el-input>
				</el-form-item>
				<el-form-item label="行程2:" style="width:330px">
					<el-input v-model="form.route2" size="small"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button style="width:95%" size="small" @click="onSubmit(1)">加载行程1</el-button>
				</el-form-item>
				<el-form-item>
					<el-button style="width:95%" size="small" @click="onSubmit(2)">加载行程2</el-button>
				</el-form-item>
				<el-form-item>
					<el-button style="width:95%" size="small" @click="clearMap">清除轨迹</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
	
    <script type="text/javascript">
		var _this='';
		var myControl=new Vue({
		    el:".wrap",
		    data:{
				map:'',
				mass1:'',
				mass2:'',
				checkedMarkerIndex:-1,
				MarkersData:[],
				checkedPoint:{
					latitude:'',
					longitude:''
				},
				checkedRoutePoint:{
					latitude:'',
					longitude:''
				},
				pathParam:[],		//轨迹
				allData:{},	//所有数据
				tripDetailVos:[],	//行程开始结束坐标	
				form:{
					route1:'1655696691938,22.772898400602437,113.90242792301997;1655696691938,22.772391400602437,113.90241792301997;',
					route2:'1655696691938,22.775898400602437,113.90842792301997;1655696691938,22.771391400602437,113.90141792301997;'
				}
		    },
		    methods:{
				//点击加载行程按钮
				onSubmit(sign){
					var pointData=[],pathParam=[],massMarks=[],points='';
					// var points='1655696691938,22.772898400602437,113.90242792301997;1655696691938,22.772391400602437,113.90241792301997;'
					points=this.form['route'+sign];
					points=points.split(';');
					points.length>0&&points.forEach((val,key)=>{
						if(val){
							var item=val.split(',');
							var obj={
								timestamp:item[0],
								lat:item[1],
								lon:item[2]
							};
							pointData.push(obj);
							pathParam.push([item[2],item[1]]);
							massMarks.push(
								{
									name: new Date(parseInt(item[0])).toLocaleString(),
									timestamp:item[0],
									lnglat:[item[2],item[1]]
								}
							);
						}
					})
					this.loadMap(sign,pathParam,massMarks)
					// console.log(massMarks1);
				},
				// 加载地图轨迹和海量点
				loadMap(sign,pathParam,massMarks){
					var polyline = new AMap.Polyline({
						map: this.map,
						path: pathParam,       
						strokeColor: "#3898f9",//线颜色
						strokeOpacity: 1,//线透明度
						strokeWeight: 4,//线宽
						strokeDasharray:[10,5],
						position:true,
						strokeStyle: "solid"//线样式
						
					});
					this.map.setFitView(polyline);
					this['mass'+sign] = new AMap.MassMarks(massMarks, {
						opacity: 0.8,
						zIndex: 131,
						cursor: 'pointer',
						alwaysRender: false,
						style: [
							{
								url: '../images/icons/point2.png',
								anchor: new AMap.Pixel(6, 6),
								size: new AMap.Size(12, 12)
							}
						]
					});
					markersss = new AMap.Marker({content: ' ', map: this.map});	
					this['mass'+sign].on('click', function (e) {
						console.log(e);
						markersss.setPosition(e.data.lnglat);
						markersss.setLabel({content: e.data.name})
					});		
					this['mass'+sign].setMap(this.map);
				},
				//清除地图轨迹和海量点
				clearMap(){
					this.map.clearMap();
					this.mass1.clear()
					this.mass2.clear()
				},
				//初始化地图
				initialize() {
					this.map = new AMap.Map("container", {
						view: new AMap.View2D({ //创建地图二维视口
							center: [116.397428, 39.90923], //创建中心点坐标
							zoom: 5, //设置地图缩放级别
							rotation: 0, //设置地图旋转角度
							resizeEnable: true
						}),
						lang: "zh_cn" //设置地图语言类型，默认：中文简体
					}); //创建地图实例
				}
		    },
		    mounted:function(){
				_this=this;
				this.initialize();
		    }
		});
        
    </script>
</body>
</html>